<template>
			  <el-scrollbar>
				  <el-menu class="el-menu"
					   background-color="#21252b"
					   :default-active="$route.path"
             :collapse="showMenu"
             @select="selectTab"
					   text-color="#ffffff"
					   router>
				    <!-- <menusTree :menuList="menuList"></menusTree> -->
            <template v-for="(item, index) in menuList">
              <el-menu-item v-if="!item.children" :index="item.path" :key="index">
                <i :class="item.icon"></i>
                <span slot="title">{{ item.name }}</span>
              </el-menu-item>
              <el-submenu :index="String(index)" v-if="item.children"  :key="index">
                <template slot="title">
                  <i :class="item.icon"></i>
                  <span>{{ item.name }}</span>
                </template>
                <template v-for="(list, index) in item.children">
                  <template v-if="list.children">
                    <menusTree :key="index" :menuObj="list"></menusTree>
                  </template>
                  <el-menu-item v-else :index="list.path" :key="index">
                    <i :class="list.icon"></i>
                    <span slot="title">{{ list.name }}</span>
                  </el-menu-item>
                </template>
              </el-submenu>
            </template>
				  </el-menu>
			  </el-scrollbar>
  <!-- <el-menu class="asideMenu" :defaultActive="activeInd" :collapse="showMenu" router>
      <template v-for="(item,ind) in menuList">
        <el-submenu v-if="item.children" :index="item.id" :key="ind">
          <template slot="title">
            <i :class="item.icon"></i>
            <span slot="title">{{item.name}}{{ item.id }}</span>
          </template>
          <template v-for="(item_c,ind_c) in item.children">
            <el-submenu v-if="item_c.children" :index="item.id" :key="ind_c">
              <template slot="title">{{item_c.name}}</template>
              <el-menu-item v-for="item_cc in item_c.children" :key="item_cc.id" :index="item.id" @click="clickMenu">
                <span>{{item_cc.name}}</span>
              </el-menu-item>
            </el-submenu>
            <el-menu-item v-else :key="ind_c" :index="item.id" @click="clickMenu">
              <i :class="item_c.icon"></i>
              <span>{{item_c.name}}</span>
            </el-menu-item>
          </template>
        </el-submenu>
        <el-menu-item v-else :index="item.id" :key="ind" @click="clickMenu">
          <i :class="item.icon"></i>
          <span>{{item.name}}</span>
        </el-menu-item>
      </template>
  </el-menu> -->
</template>

<script>
export default {
  props: {
    showMenu: {
      type: Boolean,
    },
    activeInd:{
      type:Number
    },
    isClick:{
      type: Boolean,
    },
  },
  data() {
    return {
      openIndex: ['0'],
      asideStyle: {
        background: '#2c3e50',
        textColor: '#ffffff',
        activeColor: '#ffd04b',
      },
      menuList: [
        {
          name:'首页',
          icon:'el-icon-house',
          id:1,
          path:'/'
        }
        ,
        {
          name: '汉语查询',
          icon: 'el-icon-message',
          id: 10,
          children: [
            {
              name: '成语词典',
              id: 101,
              path: '/idiom',
            },
          ]
        },
        {
          name: '用户列表',
          icon: 'el-icon-message',
          id: 2,
          children: [
            {
              name: '用户列表',
              id: 21,
              path: '/system/userList',
            },
          ]
        },
        {
          name: 'Demo',
          icon: 'el-icon-menu',
          id: 3,
          children:[
            {
              name: '表单',
              id: 31,
              path: '/demoForm',
            },
            {
              name: '列表',
              id: 32,
              path: '/demoList',
            },
            {
              name: '弹窗',
              id: 33,
              path: '/demoDialog',
            },
            {
              name: 'canvas',
              id: 34,
              path: '/canvas',
            },
          ]
        },
        {
          name: '导航三',
          icon: 'el-icon-setting',
          id: 4,
          children:[
             {
              name: '选项一',
              id: 41,
              path: '',
            },
            {
              name: '选项二',
              id: 42,
              path: '',
              // children:[
              //   {
              //     name: '选项二一',
              //     id: 421,
              //     path: '',
              //   },
              //   {
              //     name: '选项二二',
              //     id: 422,
              //     path: '',
              //   },
              // ]
            },
          ]
        }
      ],
    }
  },
  methods: {
    menuSelect(){
      debugger
      this.$parent.isClick = false;
    },
    selectTab(){
      this.$emit('changeActive')
    },
  },
}
</script>
<style lang="less">
.page_aside{
  background: #21252b !important;
  border-color:#21252b !important;
  .el-menu{
    background: #21252b;
  }
  .is-active{
    background: #0187fb !important;
    color:#fff !important;
  }
}
.el-submenu{
  .el-menu-item{
    padding-left:60px !important; 
  }
}
.el-scrollbar{
  height:100%;
  .el-scrollbar__wrap{
    overflow-x: hidden;
  }
}
</style>
<style lang="less" scoped>

.asideMenu {
  &:not(.el-menu--collapse) {
    width: 240px;
    min-height: 400px;
  }
  [class^="el-icon-"]{
    color:#fff;
  }
  .el-menu-item{
    &:hover{
      background: #0187fb;
    }
  }
  .el-submenu__title{
    &:hover{
      background: none;
    }
  }
}
</style>
